/* Display */
.dp-none { display: none; }
.dp-block { display: block; }
.dp-inline { display: inline; }
.dp-inblock { display: inline-block; }
.dp-flex { display: flex; }
.dp-inflex { display: inline-flex; }
.dp-grid { display: grid; }
.dp-ingrid { display: inline-grid; }
.dp-table { display: table; }
.dp-tabrow { display: table-row; }
.dp-tabcell { display: table-cell; }
.dp-listem { display: list-item; }
.dp-inherit { display: inherit; }
.dp-initial { display: initial; }

/* Visibility */
.vsb-v { visibility: visible; }
.vsb-h { visibility: hidden; }
.vsb-c { visibility: collapse; }
.vsb-ih { visibility: inherit; }
.vsb-ini { visibility: initial; }

/* Opacity */
.op-0 { opacity: 0; }
.op-01 { opacity: 0.1; }
.op-02 { opacity: 0.2; }
.op-03 { opacity: 0.3; }
.op-04 { opacity: 0.4; }
.op-05 { opacity: 0.5; }
.op-06 { opacity: 0.6; }
.op-07 { opacity: 0.7; }
.op-08 { opacity: 0.8; }
.op-09 { opacity: 0.9; }
.op-1 { opacity: 1; }

/* Overflow */
.ovf-v { overflow: visible; }
.ovf-h { overflow: hidden; }
.ovf-s { overflow: scroll; }
.ovf-a { overflow: auto; }

/* Overflow-X */
.ovf-x-v { overflow-x: visible; }
.ovf-x-h { overflow-x: hidden; }
.ovf-x-s { overflow-x: scroll; }
.ovf-x-a { overflow-x: auto; }

/* Overflow-Y */
.ovf-y-v { overflow-y: visible; }
.ovf-y-h { overflow-y: hidden; }
.ovf-y-s { overflow-y: scroll; }
.ovf-y-a { overflow-y: auto; }

/* Pointer Events */
.pe-n { pointer-events: none; }
.pe-a { pointer-events: auto; }

/* User Select */
.us-n { user-select: none; }
.us-t { user-select: text; }
.us-a { user-select: auto; }
.us-al { user-select: all; }

/* Resize */
.rsz-n { resize: none; }
.rsz-b { resize: both; }
.rsz-h { resize: horizontal; }
.rsz-v { resize: vertical; }

/* Cursor */
.cur-p { cursor: pointer; }
.cur-d { cursor: default; }
.cur-t { cursor: text; }
.cur-m { cursor: move; }
.cur-na { cursor: not-allowed; }
.cur-h { cursor: help; }
.cur-w { cursor: wait; }
.cur-c { cursor: crosshair; }

/* Float */
.flt-l { float: left; }
.flt-r { float: right; }
.flt-n { float: none; }

/* Clear */
.clr-l { clear: left; }
.clr-r { clear: right; }
.clr-b { clear: both; }
.clr-n { clear: none; }

/* Clip */
.clp-a { clip: auto; }
.clp-ih { clip: inherit; }
.clp-ini { clip: initial; }

/* Box Sizing */
.bxs-cb { box-sizing: content-box; }
.bxs-bb { box-sizing: border-box; }

/* Justify Content */
.jst-c { justify-content: center; }
.jst-fs { justify-content: flex-start; }
.jst-fe { justify-content: flex-end; }
.jst-sb { justify-content: space-between; }
.jst-sa { justify-content: space-around; }
.jst-se { justify-content: space-evenly; }

/* Justify Items */
.jsi-c { justify-items: center; }
.jsi-s { justify-items: start; }
.jsi-e { justify-items: end; }
.jsi-st { justify-items: stretch; }

/* Justify Self */
.jss-c { justify-self: center; }
.jss-s { justify-self: start; }
.jss-e { justify-self: end; }
.jss-st { justify-self: stretch; }

/* Align Content */
.alc-c { align-content: center; }
.alc-fs { align-content: flex-start; }
.alc-fe { align-content: flex-end; }
.alc-sb { align-content: space-between; }
.alc-sa { align-content: space-around; }
.alc-st { align-content: stretch; }

/* Align Items */
.ali-c { align-items: center; }
.ali-fs { align-items: flex-start; }
.ali-fe { align-items: flex-end; }
.ali-st { align-items: stretch; }
.ali-bl { align-items: baseline; }

/* Align Self */
.als-c { align-self: center; }
.als-fs { align-self: flex-start; }
.als-fe { align-self: flex-end; }
.als-st { align-self: stretch; }
.als-bl { align-self: baseline; }

/* ######################################################### Important ######################################################### */
/* Display */
.dp-none { display: none !important; }
.dp-block { display: block !important; }
.dp-inline { display: inline !important; }
.dp-inblock { display: inline-block !important; }
.dp-flex { display: flex !important; }
.dp-inflex { display: inline-flex !important; }
.dp-grid { display: grid !important; }
.dp-ingrid { display: inline-grid !important; }
.dp-table { display: table !important; }
.dp-tabrow { display: table-row !important; }
.dp-tabcell { display: table-cell !important; }
.dp-listem { display: list-item !important; }
.dp-inherit { display: inherit !important; }
.dp-initial { display: initial !important; }

/* Visibility */
.vsb-v { visibility: visible !important; }
.vsb-h { visibility: hidden !important; }
.vsb-c { visibility: collapse !important; }
.vsb-ih { visibility: inherit !important; }
.vsb-ini { visibility: initial !important; }

/* Opacity */
.op-0 { opacity: 0 !important; }
.op-01 { opacity: 0.1 !important; }
.op-02 { opacity: 0.2 !important; }
.op-03 { opacity: 0.3 !important; }
.op-04 { opacity: 0.4 !important; }
.op-05 { opacity: 0.5 !important; }
.op-06 { opacity: 0.6 !important; }
.op-07 { opacity: 0.7 !important; }
.op-08 { opacity: 0.8 !important; }
.op-09 { opacity: 0.9 !important; }
.op-1 { opacity: 1 !important; }

/* Overflow */
.ovf-v { overflow: visible !important; }
.ovf-h { overflow: hidden !important; }
.ovf-s { overflow: scroll !important; }
.ovf-a { overflow: auto !important; }

/* Overflow-X */
.ovf-x-v { overflow-x: visible !important; }
.ovf-x-h { overflow-x: hidden !important; }
.ovf-x-s { overflow-x: scroll !important; }
.ovf-x-a { overflow-x: auto !important; }

/* Overflow-Y */
.ovf-y-v { overflow-y: visible !important; }
.ovf-y-h { overflow-y: hidden !important; }
.ovf-y-s { overflow-y: scroll !important; }
.ovf-y-a { overflow-y: auto !important; }

/* Pointer Events */
.pe-n { pointer-events: none !important; }
.pe-a { pointer-events: auto !important; }

/* User Select */
.us-n { user-select: none !important; }
.us-t { user-select: text !important; }
.us-a { user-select: auto !important; }
.us-al { user-select: all !important; }

/* Resize */
.rsz-n { resize: none !important; }
.rsz-b { resize: both !important; }
.rsz-h { resize: horizontal !important; }
.rsz-v { resize: vertical !important; }

/* Cursor */
.cur-p { cursor: pointer !important; }
.cur-d { cursor: default !important; }
.cur-t { cursor: text !important; }
.cur-m { cursor: move !important; }
.cur-na { cursor: not-allowed !important; }
.cur-h { cursor: help !important; }
.cur-w { cursor: wait !important; }
.cur-c { cursor: crosshair !important; }

/* Float */
.flt-l { float: left !important; }
.flt-r { float: right !important; }
.flt-n { float: none !important; }

/* Clear */
.clr-l { clear: left !important; }
.clr-r { clear: right !important; }
.clr-b { clear: both !important; }
.clr-n { clear: none !important; }

/* Clip */
.clp-a { clip: auto !important; }
.clp-ih { clip: inherit !important; }
.clp-ini { clip: initial !important; }

/* Box Sizing */
.bxs-cb { box-sizing: content-box !important; }
.bxs-bb { box-sizing: border-box !important; }

/* Justify Content */
.jst-c { justify-content: center !important; }
.jst-fs { justify-content: flex-start !important; }
.jst-fe { justify-content: flex-end !important; }
.jst-sb { justify-content: space-between !important; }
.jst-sa { justify-content: space-around !important; }
.jst-se { justify-content: space-evenly !important; }

/* Justify Items */
.jsi-c { justify-items: center !important; }
.jsi-s { justify-items: start !important; }
.jsi-e { justify-items: end !important; }
.jsi-st { justify-items: stretch !important; }

/* Justify Self */
.jss-c { justify-self: center !important; }
.jss-s { justify-self: start !important; }
.jss-e { justify-self: end !important; }
.jss-st { justify-self: stretch !important; }

/* Align Content */
.alc-c { align-content: center !important; }
.alc-fs { align-content: flex-start !important; }
.alc-fe { align-content: flex-end !important; }
.alc-sb { align-content: space-between !important; }
.alc-sa { align-content: space-around !important; }
.alc-st { align-content: stretch !important; }

/* Align Items */
.ali-c { align-items: center !important; }
.ali-fs { align-items: flex-start !important; }
.ali-fe { align-items: flex-end !important; }
.ali-st { align-items: stretch !important; }
.ali-bl { align-items: baseline !important; }

/* Align Self */
.als-c { align-self: center !important; }
.als-fs { align-self: flex-start !important; }
.als-fe { align-self: flex-end !important; }
.als-st { align-self: stretch !important; }
.als-bl { align-self: baseline !important; }

/* ######################################################### Media Queries ######################################################### */
.mobile {
    display: none;
}
.desktop {
    display: flex;
}

@media only screen and (max-width: 768px) {
    .desktop {
        display: none;
    }
    .mobile {
        display: block;
    }
}